import { t } from 'i18next'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import shallow from 'zustand/shallow'
import { useTvWallStore } from '../store'
import { ErrorContent } from './ErrorContent'
import { Content } from './content'
import SinglePollModal, { SinglePollData } from '@/components/SinglePollModal'
import { VolumeModal } from '../VolumeModal'
import { FourScreenModal } from '../fourScreen'
import { Poll } from '@/api/manager/poll/interface'
import { useBoxViewHook } from './hook'
import { Modal } from '@kedacom/react-next'
import { useSinglePollStore } from '@/components/SinglePollModal/store'

const BoxView = forwardRef((props: any, ref) => {
	const {
		isOpenVolumeModal,
		boxDetailVOsSource,
		isSinglePollOpen,
		operateBoxInfo,
		isFourScreenOpen,
		update,
		style_map,
		correct_style,
	} = useTvWallStore(
		(state) => ({
			update: state.update,
			my_used_style: state.my_used_style,
			correct_style: state.correct_style,
			config: state.config,
			style_map: state.style_map,
			isFourScreenOpen: state.isFourScreenOpen,
			getRate: state.getRate,
			globalSwitchView: state.globalSwitchView,
			mode: state.mode,
			isOpenVolumeModal: state.isOpenVolumeModal,
			boxDetailVOsSource: state.boxDetailVOsSource,
			updateFlag: state.updateFlag,
			isSinglePollOpen: state.isSinglePollOpen,
			operateBoxInfo: state.operateBoxInfo,
		}),
		shallow
	)
	const [pollData, setPollData] = useState<Poll>()
	const { handleConfirmSingle } = useBoxViewHook()
	useEffect(() => {
		const {
			id = '',
			keep_time = 30,
			num = 0,
			name = '',
			members = [],
			mode = 1,
			cur_poll_mt = undefined,
		} = operateBoxInfo?.poll || {}
		let _show_batch_poll = {
			id: id,
			keep_time: keep_time,
			num: num,
			name: name,
			members: members,
			mode: mode,
			cur_poll_mt,
		}
		setPollData(new Poll(_show_batch_poll))
	}, [operateBoxInfo])
	useImperativeHandle(ref, () => ({}))
	return (
		<>
			{style_map[correct_style] ? (
				boxDetailVOsSource.map((item, index) => {
					if (item.is_mine /**属于我的*/) {
						return <Content boxInfo={item} index={index} key={index}></Content>
					} else if (item.hdu_alias === '' /**未设置通道*/) {
						return (
							<ErrorContent
								boxInfo={item}
								occupied={false}
								error_type={2}
								index={index}
								key={index}
							></ErrorContent>
						)
					} else if (!item.is_online /**HDU不在线*/) {
						return (
							<ErrorContent
								boxInfo={item}
								occupied={false}
								error_type={1}
								index={index}
								key={index}
							></ErrorContent>
						)
					} else {
						if (item.is_used === 1 /**被占用 */) {
							return (
								<ErrorContent
									boxInfo={item}
									occupied={true}
									error_type={3}
									index={index}
									key={index}
								></ErrorContent>
							)
						} else if (item.is_used === 255 /**无效状态 */) {
							return (
								<ErrorContent
									boxInfo={item}
									occupied={false}
									error_type={5}
									index={index}
									key={index}
								></ErrorContent>
							)
						} else {
							return <Content boxInfo={item} index={index} key={index}></Content>
						}
					}
				})
			) : (
				<></>
			)}
			{/*单通道模态框 */}
			<Modal
				open={isSinglePollOpen}
				title={t('单通道轮询')}
				needFooter={false}
				width={850}
				height={612}
				onCancel={() => {
					update({ isSinglePollOpen: false })
					useSinglePollStore.getState().reset()
				}}
			>
				<SinglePollModal
					setOpen={() => {
						update({ isSinglePollOpen: false })
					}}
					data={{ index: 0, poll: pollData ?? null }}
					okCallBack={(data: SinglePollData) => {
						handleConfirmSingle(data)
					}}
					getPollMembersNum={() => -99999}
				/>
			</Modal>
			{/* 四分屏模态框 */}
			<FourScreenModal />
			{/* 声音模态框 */}
			<VolumeModal />
		</>
	)
})
export default BoxView
